<template>
  <footer class="footer bd-top">
    <ul class="footer-actions clearfix">
      <li class="footer-action footer-item20 fl mgT3"
       style="border-left:0">
        <router-link to="/home">
          <i class="lyf-icons lyf-kefu"></i>
          <p>在线客服</p>
        </router-link>
      </li>
      <li class="footer-action footer-item20 fl mgT3">
        <router-link to="/home">
          <i class="lyf-icons lyf-collect"></i>
          <p>爱吃</p>
        </router-link>
      </li>
      <li class="footer-action footer-item20 fl mgT3">
        <router-link to="/cart">
          <i class="lyf-icons lyf-cart">
            <i class="bubble cartnum bgff6900">{{count}}</i>
          </i>
          <p>购物车</p>
        </router-link>
      </li>
      <li class="footer-action footer-item40 fl bgff6900"
       style="width:40%">
          <p class="add-to-cart f18">加入购物车</p>
      </li>
    </ul>
  </footer>
</template>
<script>
export default {
  computed: {
    count() {
        return this.$store.getters.getCartCount;
    }
  }
}
</script>
<style lang="less" scoped>
.footer-actions{
  width:100%;
}
.footer-action.footer-item20{
  width: 20%;
  line-height: 1;
  box-sizing: border-box;
  border-left: 1px solid #e0e0e0;
  a{
    display: block;
    width: 100%;
    height: 100%;
  }
  .lyf-icons{
    margin: .06rem 0 .03rem;
  }
}
.footer-action.footer-item40{
  width: 40%;
  height: 100%;
  line-height: .49rem;
  .add-to-cart{
    height: 100%;
    color: #fff;

  }
}
</style>
